<template>
	<div class="content">
		<h1>编辑酒店预约</h1>
       <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
  <el-form-item label="名称" prop="name">
    <el-input v-model="ruleForm.name"></el-input>
  </el-form-item>
  <el-form-item label="电话" prop="phone">
    <el-input v-model="ruleForm.phone"></el-input>
  </el-form-item>

   	<el-form-item label="内页图">
   	<el-upload
  class="upload-demo"
  ref="upload"
  action="https://jsonplaceholder.typicode.com/posts/"
  :file-list="fileList"
   :limit="3" 
:on-change='changeUpload' accept="image/jpeg,image/gif,image/png,image/bmp"
:auto-upload="false"
 >
  <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
  <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，只能上传三张</div>
</el-upload>
   </el-form-item>
  
  <el-form-item>
    <el-button class="btn" type="warning" @click="submitForm('ruleForm')">提交修改</el-button>
  </el-form-item>
</el-form>
	</div>
</template>

<script>
	import config from "@/assets/js/config.js";
	import config1 from "@/assets/js/config1.js";
	export default {
    data(){
      return {
      	
        img_url:"",
        baseUrl:config.baseUrl,
        arr:[],
        img_url1:"",
        img_url2:"",
        img_url3:"",
      	fileList:[],
        ruleForm: {
          name: '',
          phone:''
        },
        rules: {
          name: [
            { required: true, message: '请输入名称', trigger: 'blur' }
          ],
         phone: [
            { required: true, message: '请输入电话', trigger: 'blur' }
          ]
        }
      };
    },
    methods: {
    
      submitForm(formName) {
      
        this.$refs[formName].validate((valid) => {
          if (valid) {
          		
            this.$require.post(config.updateHotel, {
            	    id:this.$route.query.id,
					img_url1: this.img_url1,
					img_url2: this.img_url2,
					img_url3: this.img_url3,
					name: this.ruleForm.name,
					phone: this.ruleForm.phone
				}).then((res)=>{
					console.log(res)
					
				})
          } else {
            console.log('error submit!!');
            return false;
          }
        });
         this.$router.push({path: '/appointment/hotel'})
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
        
      },
          submitUpload() { 	 
          	this.$notify({
					title: '',
					message: '上传成功',
					type: 'success'
				});
          this.$require.get(config.findHotel,{
          	 id:this.$route.query.id
          }).then((res)=>{
          	console.log(res)
          })
      },
      changeUpload(file, fileList){
      	console.log(file,fileList)
        
      	var formData = new FormData();
				formData.append("files", file.raw);
				this.$require.post(config.uploadImg, formData, {
					headers: {
						Authorization: "Bearer " + this.$store.state.token
					}
				}).then((res) => {
					console.log(res)
			        this.arr.push(res.data.data.img_url)
					console.log(this.arr)
					this.img_url3=this.arr[2]
					this.img_url2=this.arr[1]
					this.img_url1=this.arr[0]
					console.log()
				})
     },
       descend(index, rows){
				//降序
				console.log(rows.orders)
				this.$require.post(config.sortHotel,{
					move:-1,
					orders:rows.orders,
				},{
					header:{
						Authorization: "Bearer " + this.$store.state.token
					}
				}).then((res)=>{
					console.log(res)
				})
			},
			ascend(index, rows){
				//升序
				console.log(rows.orders)
				this.$require.post(config.sortHotel,{
					move:1,
					orders:rows.orders,
				},{
					header:{
						Authorization: "Bearer " + this.$store.state.token
					}
				}).then((res)=>{
					console.log(res)
				})
			},
      deleteRow(index, rows) {
			  
		  this.$require.post(config.delHotel,{
		        id:rows[index].id
		  },{
				headers: {
					Authorization: "Bearer " + this.$store.state.token
				}
			}).then((res)=>{
		  	console.log(res)
		  })
             rows.splice(index,1);
		}
    },
    created(){
    	this.ruleForm.name = this.$route.query.list.name;
    	this.ruleForm.phone = this.$route.query.list.phone;	
    	console.log()
    }
  }
</script>

<style scoped="scoped">
	.content{
		padding: 0 50px;
	}
	h1{
		font-size: 32px;
		margin: 21px 0;
	}
	.btn{
		margin-top: 20px;
	}
</style>